<template>
	<!-- TODO-jj: 点击遮罩关闭 -->
	<view>
		<view v-if="data?.show === 1">
			<uni-fab
				ref="fabRef"
				:pattern="state.pattern"
				:content="state.content"
				:horizontal="state.horizontal"
				:vertical="state.vertical"
				:direction="state.direction"
				@trigger="trigger"
				@fabClick="fabClick"
				:popMenu="true"
			></uni-fab>
		</view>
	</view>
</template>
<script setup>
	import $app from '/shop/store/app.js';
	import $router from '/shop/router/index.js';
	import $url from '/shop/url/index.js';
	import { computed, reactive, ref, unref } from 'vue';
	import { onBackPress } from '@dcloudio/uni-app';
	const data = computed(() => $app().template.basic?.floatbut?.setStyle);
	console.log('data.list: ', unref(data)?.list);

	const cfg = unref(data);
	const state = reactive({
		pattern: {},
		content: [],
		direction: '',
		show: 0,
		horizontal: 'right',
		vertical: 'bottom',
	});

	console.log('fatbutton: ', data.mode);
	const fabRef = ref(null);

	if (cfg?.mode && cfg.mode === 1) {
		// 垂直..
		state.direction = 'vertical';
	} else {
		// 水平..
		state.direction = 'horizontal';
	}

	if (cfg?.butPosition == 0) {
		// 左下角
		state.horizontal = 'left';
		state.vertical = 'bottom';
	}

	if (cfg?.butPosition == 1) {
		// 右下角
		state.horizontal = 'right';
		state.vertical = 'bottom';
	}

	if (cfg?.butPosition == 2) {
		// 左上角
		state.horizontal = 'left';
		state.vertical = 'top';
	}
	if (cfg?.butPosition == 3) {
		// 右上角
		state.horizontal = 'right';
		state.vertical = 'top';
	}

	cfg?.list?.forEach((i) => {
		console.log('i===>: ', i);
		if (cfg.isText === 0) {
			state.content.push({ iconPath: $url.cdn(i.src), url: i.url });
		} else {
			state.content.push({
				iconPath: $url.cdn(i.src),
				text: i.title.text + '',
				url: i.url,
			});
		}
	});

	state.pattern = {
		color: cfg?.color,
		backgroundColor: cfg?.backgroundColor,
		buttonColor: cfg?.buttonColor,
		iconColor: cfg?.iconColor,
	};

	function trigger(e) {
		$router.go(e.item.url);
	}

	function fabClick() {
		console.log('点击。。。。。');
		// state.show = state.show == 1 ? 0 : 1;
	}
	onBackPress(() => {
		if (unref(fabRef).isShow) {
			unref(fabRef).close();
			return true;
		} else {
			return false;
		}
	});
</script>
<style lang="scss" scoped>
	.float-bg {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11;
		width: 100%;
		height: 100%;
		background-color: rgba(#000000, 0.4);
	}
</style>
